[HTML5] Drag & Drop API おさらい

こんにちは。クラスメソッドの稲毛です。

2014 年の正式勧告へ向けて策定が進められている HTML5 ですが、既に Web 開発では定番となっています。今回は、HTML5 で追加された API の内のひとつである Drag & Drop API について、正式勧告前におさらいをして内容をまとめてみたいと思います。

概要

開発者が Web アプリケーションへ Drag & Drop 機能を実装する際に必要な事柄は下記の通りです。

1. Drag Target を指定する。
2. Drag & Drop 関連イベントを適切に処理する。

この二点さえ押さえれば Drag & Drop を実現することができます。しかし 2 番目の「イベントを適切に処理」という点が意外に複雑なので注意が必要です。（この点については詳細記事にて触れます。）

二種類の Drag & Drop

Web アプリケーションでの Drag & Drop は大別すると二種類となります。

• Web アプリケーション内で DOM 要素を Drag & Drop
• ファイルを Web アプリケーションへ Drag & Drop

これらの詳細についてはそれぞれの個別の記事でまとめましたので、そちらをご参照ください。

まとめ

私は当初「 HTML ページ内部での DOM 要素 Drag & Drop 」と「 ブラウザ外からのファイル Drag & Drop 」は異なる仕組みで実現されているものと思っていましたが、実際は同じイベントのハンドリング等で実現されていることを知ってより身近な API になった気がしました。Drag & Drop API の習得に二の足を踏んでいる方も、その点を踏まえて挑戦してみると意外と容易かもしれません。